 <template>
   <div>
     <div class="flex" v-if="showFilter&&!open">
       <div style="flex: 1">
         <slot name="left"></slot>
       </div>
       <div class="btn">
         <el-button size="small" @click="resetFn">重置</el-button>
         <el-button type="primary" size="small" @click="searchFilter">查询</el-button>
         <el-link :underline="false" @click="openFn" style="margin-left: 8px">展开<i
             class="el-icon-arrow-down"></i></el-link>
       </div>
     </div>
     <div v-if="open">
       <div>
         <slot></slot>
       </div>
       <div style="text-align: right">
         <el-button size="small" @click="resetFn">重置</el-button>
         <el-button type="primary" size="small" @click="searchAll">查询</el-button>
         <el-link :underline="false" @click="openFn" style="margin-left: 8px">收起<i
             class="el-icon-arrow-up"></i></el-link>
       </div>
     </div>
   </div>
 </template>

 <script>
   export default {
     name: 'searchPanel',
     props: {
       showFilter: {
         type: Boolean,
         default: false
       }
     },
     data() {
       return {
         open: false
       }
     },
     methods: {
       openFn() {
         this.open = !this.open
       },
       searchFilter() {
         this.$emit('custom-search', false)
       },
       searchAll() {
         this.$emit('custom-search', true)
       },
       resetFn() {
         this.$emit('reset')
       }
     }
   }
 </script>

 <style>
   .flex {
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
 </style>
